<template>
    <div class="main">
      <div class="banner">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in moreimg">
              <img :src=url+item alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="nurse">
        <div class="left">
          <h3>{{name}}</h3>
          <p v-if="real_price>=1">最低: ¥ {{parseInt(real_price)}}</p>
          <p v-if="real_price<1">最低: ¥ {{real_price}}</p>
          <del v-if="show_price>=1">¥{{parseInt(show_price)}}</del>
          <del v-if="show_price<1">¥{{show_price}}</del>
          <div v-if="lasttype==2">下一阶梯价: ￥{{next_price}}</div>
        </div>
        <div class="right">
          <div class="circle">
            <div></div>
          </div>
          <p>截止时间</p>
          <span>{{time}}</span>
        </div>
      </div>
      <div class="group">
        <div class="logo">
          <div></div>
          <span></span>
          <h3>拼团进度</h3>
        </div>
        <ul>
          <li class="process" v-for="(item,index) in progress" v-if="index == 0">
            <div class="box">
              <div class="lingbox" v-if="item.active == 1">
                <div class="ling"></div>
              </div>
              <div v-if="item.active == 0"></div>
              <p :class="{mj:item.active==1}">{{item.title}}</p>
            </div>
            <p class="stage" v-if="item.active == 1 && join_num !==play_num">◀目前</p>
            <p class="stage" v-if="item.active == 1 && join_num == play_num">◀已完成</p>
          </li>
          <li class="process" v-for="(item,index) in progress" v-if="index > 0">
            <div class="line">
              <div></div>
            </div>
            <div class="box">
              <div class="lingbox" v-if="item.active == 1">
                <div class="ling"></div>
              </div>
              <div v-if="item.active == 0"></div>
              <p :class="{mj:item.active==1}">{{item.title}}</p>
            </div>
            <p class="stage" v-if="item.active == 1 && join_num !==play_num">◀目前</p>
            <p class="stage" v-if="item.active == 1 && join_num == play_num">◀已完成</p>
          </li>
        </ul>
      </div>
      <tuanbottom :describe='describe' :play_title='play_title' :play_desc="play_desc"></tuanbottom>
      <div class="foot">
        <p v-if="real_price>=1 && status !=2">支付 <span>￥{{parseInt(next_price)}}</span></p>
        <p v-if="real_price<1 && status !=2">支付 <span>￥{{next_price}}</span></p>
        <p v-if="status ==2">该团已完成</p>
        <a v-if="status ==1" @click="beforeRequest()">我要参团</a>
        <a v-if="status ==2">我要开团</a>
      </div>
      <div class="prop" v-show="isShow">
        <div class="propcon">
          <p v-if="num == 0" :class="{p0:num==0}">
            项目仅限非会员购买 <br>
            BUT <br>
            会员可以发起拼团 <br>
            拼团成功可获得现金红包 <br>
          </p>
          <p v-if="num==3" :class="{marTop5:num==3}">
            该团已开启<br>
            请至我的拼团<br>
            分享给更多好友<br>
          </p>
          <p v-if="num == 2" v-html="message">{{message}}</p>
          <p v-if="num == 4" :class="{marTop5:num==4}">{{busymessage}}</p>
          <a :href="myUrl+'/?join='+join_first+'&zzypropid=1'" v-if="num ==0" :class="{a0:num==0}">马上发起</a>
          <a :href="myUrl+'/'" v-if=" num ==2">返回首页</a>
          <a :href="myUrl+'/availableshop'" v-if="num ==3">返回我的拼团</a>
          <a v-if="num ==4" :class="{mar:num==4}" @click="lastreload(),isShow=false">确定</a>
          <div><span class="" @click="isShow = false" :class="{span0:num==0}">×</span></div>
        </div>
      </div>
      <div class="successprop" v-show="successShow">
        <div class="propcon">
          <p class="successTop">
            分享出去,让更多人知道
            <img src="../../img/up.png" alt="" class="upimg">
          </p>
          <p class="successWord" v-html="successWord">{{successWord}}</p>
          <p class="successBottom">
            体验更多涛姐喜欢的护理
            <img src="../../img/down-shouye.png" alt="" class="downimg">
          </p>
          <div @click="successShow=false">我知道了</div>
        </div>
      </div>
      <div class="shop" v-show="okShow">
        <div class="shopcon">
          <h3>请选择店铺</h3>
          <div class="shopul">
            <div class="shopli" v-for="(item,index) in shops" @click="zzy(index)" >
                <div>
                  <img src="../../img/qipao.png" alt="">
                  <p>{{item}}</p>
               </div>
                <img src="../../img/ling.png" alt="" v-show="arr.indexOf(index) != -1">
            </div>
          </div>
          <a @click="shopRequest()">确定</a>
          <div class="cha"><span class="" @click="okShow = false">×</span></div>
        </div>
      </div>
      <PulseLoader v-if="loading==true"  :size="size" :color="color"></PulseLoader>
      <div class="gohome">
        <a :href="myUrl+'/?zzypropid=1'">
          <i class="iconfont">&#xe634;</i>
          <p>首页</p>
        </a>
      </div>
      <div class="zzyprop" v-show="zzyShow">
        <div class="propcon">
          <p class="zzyTop">
            分享出去,让更多人知道
            <img src="../../img/up.png" alt="" class="upimg">
          </p>
          <p class="zzyWord" v-if="accountType==1">分享好友,<br>成团后即可领取红包！</p>
          <p class="zzyWord" v-if="accountType==2">该团已满员!<br>快去首页发现更多<br>涛姐喜爱的护理</p>
          <p class="zzyWord" v-if="accountType==3">员工无法购买,<br>赶快分享给更多好友吧！</p>
          <p class="zzyBottom">
            点击下方发起拼团
            <img src="../../img/down-tuan.png" alt="" class="downimg">
          </p>
          <a @click="zzyShow=false" :href="myUrl+'/kaituan?id='+group_id">我知道了</a>
        </div>
      </div>
      <div class="upshow" v-if="upshow==true">
        <div class="upcon" >
          <h3>请确认信息</h3>
          <p v-if="accountType==1">姓名: {{user_name}}(会员)</p>
          <p v-if="accountType==2">姓名: {{user_name}}(注册用户)</p>
          <p v-if="accountType==3">姓名: {{user_name}}(员工)</p>
          <p>电话: {{user_phone}}</p>
          <div>
            <a @click="request()">确认</a>
            <a :href="myUrl+'/'">否</a>
          </div>
        </div>
      </div>
      <judge :judgeNum="judgeNum"></judge>
    </div>
</template>

<script>
    import $ from "jQuery";
    import tuantop from "./tuantop.vue";
    import tuannurse from "./tuannurse.vue";
    import tuanbottom from "./tuanbottom.vue";
    import prop from "./prop.vue";
    import tuanprocess from "./tuanprocess.vue";
    import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
    import wx from 'weixin-js-sdk';
    import judge from "./judge.vue";
    import {
      baseUrl,auth,myUrl,
    } from "@/assets/public";
    export default {
        name: 'main',
        data () {
            return {
                busymessage:"",
                successShow:false,
                isShow:false,
                url:"",
                moreimg:"",
                name:"",
                real_price:"",
                show_price:"",
                endtime:"",
                play_title:"",
                play_desc:"",
                describe:"",
                progress:"",
                id:"",
                message:"",
                num:"",
                open_id:"",
                shops:"",
                accountType:"",
                type:"",
                okShow:false,
                arr:[],
                shop_id:"",
                arr1:[],
                lasttype:"",
                next_price:"",
                loading:true,
                size:".5rem",
                color:"#333",
                shareTitle:"我已参加美丽田园爱拼才美丽，就差你了！一起体验涛姐最爱护理!",
                lineLink:"",
                imgUrls:myUrl+"/static/img/share.png",
                descContent:"越“拼”越实惠，越“拼”价越低",
                appShareTitle:"我已参加美丽田园爱拼才美丽，就差你了！一起体验涛姐最爱护理!",
                join_first:"",
                auth_id:"",
                join_num:"",
                play_num:"",
                time:"",
                successWord:"",
                status:"",
                zzyShow:false,
                is_join:"",
                group_id:"",
              next_refund:"",
                judgeNum:0,
              user_name:"",
              user_phone:"",
              upshow:false,
			  myUrl:myUrl,
            }
        },
        created(){
          auth();
          this.lineLink =window.location.href;
        },
        mounted(){
          this.url = baseUrl;
          var id = this.$route.query.id;
          this.id=id;
          var that = this;
          $.ajax({
            type:"GET",
            url: baseUrl+"/api/groupYesInfo/"+id,
            data:{
              "openid": localStorage.openid
            },
            dataType:"json",
            success:function (res) {
              if (res.status == 200){
                that.des = res.data.describe;
                that.moreimg =res.data.more_img;
                that.name=res.data.name;
                that.real_price=res.data.real_price;
                that.show_price=res.data.show_price;
                that.endtime=res.data.endtime;
                that.describe=res.data.describe;
                that.progress=res.data.progress;
                that.play_title=res.data.play_title;
                that.play_desc=res.data.play_desc;
                that.open_id=res.data.id;
                that.shops=res.data.shops;
                that.accountType=res.data.accountType;
                that.lasttype=res.data.type;
                that.next_price=res.data.next_price;
                that.time= that.getCountDown(that.endtime);
                that.join_first=res.data.join_first;
                that.auth_id=res.data.auth_id;
                that.join_num=res.data.join_num;
                that.play_num=res.data.play_num;
                that.status=res.data.status;
                that.is_join=res.data.is_join;
                that.group_id=res.data.group_id;
                that.user_name=res.data.user_name;
                that.user_phone=res.data.user_phone;
                that.loading=false;

                if(that.status==2){//说明已经满员了,进来的话就弹窗
                  that.zzyShow = true;
                }
              }else if(res.status==-200) {
                that.$router.push({path:myUrl+"/notfound"});
              }
            }
          })

          //banner轮播
          this.$nextTick(function () {
            var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              paginationClickable: true,
              spaceBetween: 30,
              autoplay: 3000,
              observer:true,
              observeParents:true,//修改swiper的父元素时，自动初始化swiper
            });
          })

          this.wechatShare();
        },
        methods: {
		  //开团前获取用户信息
		  beforeRequest(){
		    var that = this;
		    if(that.user_name || that.user_phone){
			  that.upshow=true;
			}else{
			  that.judgeNum =1;
			}
		  },
          request(){
            var that = this;
			that.upshow=false;
            $.each(that.shops,function (k,n) {
              that.arr1.push(k);
            })
            if(this.accountType==undefined){
              $.ajax({
                url:baseUrl+"/api/checkUser",
                type:"GET",
                dataType:"json",
                data:{'openid':localStorage.openid,'access_token':localStorage.access_token,'randstr':localStorage.randstr,},
                success:function (res) {
                  if(res.status==200){
                    that.accountType=res.data.accountType;
                    if(that.accountType==1 || this.accountType==3){
                      this.num=0;
                      this.isShow=true;
                    }else {
                      if(that.is_join==1){
                        that.isShow=true;
                        that.num =3;
                        return false;
                      }
                      if(that.arr1.length>0){
                        that.okShow=true;
                      }else{
                        $.ajax({
                          data:{
                            "openid": localStorage.openid
                          },
                          type:"POST",
                          url: baseUrl+"/api/joinGroup/"+that.open_id,
                          dataType:"json",
                          success:function (res) {
                            if(res.status==200){
                              that.change();
                            }else if(res.status==-200){
                              that.isShow=true;
                              that.num=2;
                              that.message=res.message;
                            }else if(res.status==220){
                              that.callpay($.parseJSON(res.data));
                            }else if(res.status==-300){
                              that.isShow=true;
                              that.num=4;
                              that.busymessage=res.data.message;
                            }
                          }
                        })
                      }
                    }
                  }else if(res.status==300){
                    that.judgeNum =1;
                  }else if(res.status==-300){
                    that.isShow=true;
                    that.num=4;
                    that.busymessage=res.data.message;
                  }
                }
              })
            } else if(this.accountType==1 || this.accountType==3){
              this.num=0;
              this.isShow=true;
            }else if(this.accountType == 2){
              if(that.is_join==1){
                that.isShow=true;
                that.num =3;
                return false;
              }
              if(that.arr1.length>0){
                  that.okShow=true;
              }else{
                $.ajax({
                  data:{
                    "openid": localStorage.openid
                  },
                  type:"POST",
                  url: baseUrl+"/api/joinGroup/"+that.open_id,
                  dataType:"json",
                  success:function (res) {
                    if(res.status==200){
                      that.change();
                    }else if(res.status==-200){
                      that.isShow=true;
                      that.num=2;
                      that.message=res.message;
                    }else if(res.status==220){
                      that.callpay($.parseJSON(res.data));
                    }else if(res.status==-300){
                      $.ajax({
                        url:baseUrl+"/api/checkUser",
                        type:"GET",
                        dataType:"json",
                        data:{'openid':localStorage.openid,'access_token':localStorage.access_token,'randstr':localStorage.randstr},
                        success:function (res) {
                          if(res.status==200){
                            that.request();
                          }else if(res.status==300){
                            that.judgeNum =1;
                          }else if(res.status==-300){
                            that.isShow=true;
                            that.num=4;
                            that.busymessage=res.data.message;
                          }
                        }
                      })
                    }
                  }
                })
              }
            }
          },
          zzy(index){
            var k = $.inArray(index, this.arr);
            console.log(this.arr);
            if(k==-1){
              this.arr.push(index);
                console.log(-1);
            }else {
              function removeByValue(arr, val) {
                for(var i=0; i<arr.length; i++) {
                  if(arr[i] == val) {
                    arr.splice(i, 1);
                    break;
                  }
                }
              }
              removeByValue(this.arr, index);
            }
            this.shop_id=this.arr.join(",");
//            console.log(this.shop_id);
          },
          shopRequest(){
            this.okShow=false;
            var that =this;
            $.ajax({
              data:{
                "openid": localStorage.openid,
                shop_ids:that.shop_id
              },
              type:"POST",
              url: baseUrl+"/api/joinGroup/"+that.open_id,
              dataType:"json",
              success:function (res) {
                if(res.status==200){
                  that.change();
                }else if(res.status==-200){
                  that.isShow=true;
                  that.num=2;
                  that.message=res.message;
//                  setTimeout(function () {
//                    that.isShow=false;
//                  },2000)
                }else if(res.status==220){
                  that.callpay($.parseJSON(res.data));

                }else if(res.status==-300){
                  $.ajax({
                    url:baseUrl+"/api/checkUser",
                    type:"GET",
                    dataType:"json",
                    data:{'openid':localStorage.openid,'access_token':localStorage.access_token,'randstr':localStorage.randstr},
                    success:function (res) {
                      if(res.status==200){

                      }else if(res.status==300){
                        that.judgeNum =1;
                      }else if(res.status==-300){
                        that.isShow=true;
                        that.num=4;
                        that.busymessage=res.data.message;
                      }
                    }
                  })
                }
              }
            })
          },
          jsApiCall(jsApiParameters){
            var that =this;
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', jsApiParameters,
              function(res){
                WeixinJSBridge.log(res.err_msg);
                  //alert(res.err_code+res.err_desc+res.err_msg);
                if(res.err_msg == "get_brand_wcpay_request:ok"){
                  that.change();
                }
              }
            );
          },
          callpay(jsApiParameters) {
            var that = this;
            if (typeof WeixinJSBridge == "undefined") {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
              }
            } else {
              that.jsApiCall(jsApiParameters);
            }
          },
          wechatShare(){
            let that = this;
            wx.ready(function (){
              wx.onMenuShareTimeline({
                title: that.shareTitle, // 分享标题
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareAppMessage({
                title: that.appShareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {

                },
                cancel: function () {}
              });
              wx.onMenuShareQQ({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareWeibo({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户取消分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareQZone({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户取消分享后执行的回调函数

                },
                cancel: function () {}
              });
            })
          },
          getCountDown(timestamp){
            var that =this;
            setInterval(function(){
              var nowTime = new Date();
              var endTime = new Date(timestamp * 1000);

              var t = endTime.getTime() - nowTime.getTime();
              //            var d=Math.floor(t/1000/60/60/24);
              var day =Math.floor(t/1000/60/60/24);
              var hour=Math.floor(t/1000/60/60%24);
              var min=Math.floor(t/1000/60%60);
              var sec=Math.floor(t/1000%60);

              if (day < 10) {
                day = "0" + day;
              }
              if (hour < 10) {
                hour = "0" + hour;
              }
              if (min < 10) {
                min = "0" + min;
              }
              if (sec < 10) {
                sec = "0" + sec;
              }
              if(day>=1){
                that.time = day +"天" + hour + "时" + min + "分" + sec + "秒";
              }else if(day<1){
                that.time = hour + "时" + min + "分" + sec + "秒";
              }
            },1000);

          },
          change(){
            var that =this;
            $.ajax({
              url:baseUrl+"/api/fullGroupNum/"+that.open_id,
              type:"GET",
              data:{
                "openid":localStorage.openid
              },
              dataType:"json",
              success:function (res) {
                if(res.data.is_end == 0){
                  //-200说明不是最后一个参团
                  that.successShow=true;
                  that.next_refund=res.data.next_refund;
                  that.successWord="参团成功!<br>邀请好友一同参团,<br>成功购买可获得"+that.next_refund+"元返现!"
                }else {
                  //200说明是最后一个参团
                  that.successShow=true;
                  that.successWord="参团成功!<br>查看我的拼团"
                }
              }
            })
          },
          lastreload(){
            window.location.reload();
          },

        },
        components:{
            tuantop,tuannurse,tuanprocess,tuanbottom,PulseLoader,judge,
        }
    }
</script>

<style scoped>
  @import "../../static/font_880fex1d3q6c4n29/iconfont.css";
  .upshow {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .upshow .upcon {
    width: 80%;
    padding:0 10%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    background: url("../../img/prop.png") center center no-repeat;
    overflow: hidden;
  }
  .upshow .upcon h3 {
    width: 60%;
    margin:0 auto 0.2rem;
    text-align: center;
    margin-top:4rem;
    font-size: 0.37rem;
  }
  .upshow .upcon p {
    width: 51%;
    margin:0.2rem auto 0;
    font-size:.32rem;
    margin-top:.3rem;
    overflow: hidden;
	font-size: 0.4rem;
  }
  .upshow .upcon p:nth-child(2) {
    margin-top:.6rem;
  }
  .upshow .upcon div {
    width: 60%;
    margin:0 auto;
    margin-top:.6rem;
    display: flex;
  }
  .upshow .upcon div a {
    width: 50%;
    height:.6rem;
    text-align: center;
    line-height:.6rem;
    background: #666666;
    color: #ffffff;
  }









  .mar {
    margin-top:1.5rem !important;
  }
  .gohome {
    width: 1.5rem;
    height:1.5rem;
    position: fixed;
    bottom:2rem;
    right:0;
    background: rgba(76,76,76,.5);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right:.5rem;
  }
  .gohome a {
    width: 2rem;
    height:1.4rem;
    text-align: center;
  }
  .gohome a i {
    display: block;
    font-size:.6rem;
    margin-top:.2rem;
    color: #ffffff;
  }
  .gohome a p {
    font-size:.32rem;
    color: #ffffff;
  }
  .banner {
    width: 100%;
    height:auto;
  }
  .banner .swiper-container {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .banner .swiper-container .swiper-slide {
    text-align: center;
    font-size: .4rem;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .banner .swiper-container .swiper-slide img {
    width:100%;
    height:auto;
  }
  .nurse {
    width: 90%;
    min-height:1.6rem;
    border-bottom:1px solid #dddddd;
    margin:0 auto;
    padding:.2rem;
    display: flex;
  }
  .nurse .left {
    width: 68%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border-right:1px solid #dddddd;
    padding-left:.3rem;
  }
  .nurse .left h3 {
    width: 100%;
    font-size:.5rem;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
  }
  .nurse .left p {
    font-size:.48rem;
    color: #ff5454;
    margin-top:.2rem;
    vertical-align: bottom;
  }
  .nurse .left del{
    font-size:.36rem;
    color: #999;
    margin-top:.2rem;
    margin-left:.2rem;
  }
  .nurse .left div {
    font-size: .36rem;
    color: #666;
    margin-top: .2rem;
    margin-left: .2rem;
  }
  .nurse .right {
    width: 32%;
    display: flex;
    flex-wrap: wrap;
    padding:.2rem .2rem;
    justify-content: center;
    align-items: center;
  }
  .nurse .right .circle {
    width: .4rem;
    height: .4rem;
    border:1px solid #333333;
    background: #d6d6d6;
    border-radius:50%;
    position: relative;
  }
  .nurse .right .circle div {
    width: .16rem;
    height: .16rem;
    border-left:1px solid #333333;
    border-bottom:1px solid #333333;
    position: absolute;
    top:.1rem;
    left:.15rem;
  }
  .nurse .right p {
    margin-left:.2rem;
    font-size:.36rem;
    color: #666;
  }
  .nurse .right span {
    font-size:.4rem;
    color: #333333;
    text-align: center;
  }
  .group {
    width: 90%;
    height:auto;
    border-bottom:1px solid #dddddd;
    margin:0 auto;
    padding:.2rem;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*align-items: center;*/
    /*justify-content: space-between;*/
  }
  .logo {
    display: flex;
    align-items: center;
  }
  .logo div{
    width: .3rem;
    height: .3rem;
    background: #000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .logo span {
    display: block;
    width: .25rem;
    height: .25rem;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-left:-.1rem;
  }
  .group h3{
    margin-left:.2rem;
    font-size:.4rem;
  }
  ul {
    padding-left:.7rem;
    margin:.3rem 0;
  }

  ul .process{
    width: 100%;
    /*height: .6rem;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size:.4rem;
  }
  ul .process .box {
    /*width: 100%;*/
    display: flex;
    align-items:center;
  }
  ul .process .box>div{
    width: .25rem;
    height: .25rem;
    border:1px solid #999;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul .process .box .ling {
    width: .1rem;
    height: .1rem;
    background: #000;

  }
  ul .process .box .lingbox {
    border:1px solid #333;
  }
  ul .process .box p {
    margin-left:.3rem;
    color: #999;
  }
  ul i.process p {
    color: #999;
  }
  /*ul li.state p.stage {*/
  /*margin-left:1.2rem;*/
  /*}*/
  ul .state p{
    color: #000 !important;
  }
  ul .state .lingbox {
    border:1px solid #000 !important;
  }
  ul .state>div .ling {
    width: .15rem;
    height: .15rem;
    background: #000;
  }
  ul li .line {
    width: 100%;
  }
  ul li .line div {
    width: 1px;
    height:.5rem;
    background: #999;
    margin-left:.15rem;
  }
  .mj {
    color: #333 !important;
  }



  .foot {
    width: 80%;
    padding:0 10%;
    height: 1.5rem;
    border-top:1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content:space-between;
    position: fixed;
    bottom:0;
    left:0;
    background: #ffffff;
  }
  .foot p {
    font-size:.4rem;
  }
  .foot p span {
    color: #ff5454;
  }
  .foot a {
    display: block;
    width: 4rem;
    text-align: center;
    height:1rem;
    line-height:1rem;
    background: #000;
    color: #ffffff;
    letter-spacing: 2px;
    font-size:.4rem;
  }
  .prop {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .prop .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    background: url("../../img/prop.png") center center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    /*align-items: center;*/
  }

  .prop .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    margin-top:5.2rem;
    font-size:.34rem;
    line-height:.6rem;
  }
  .prop .propcon a {
    display: block;
    width: 3rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    border:1px solid #000;
    /*margin-bottom:2rem;*/
  }
  .prop .propcon div {
    width: 100%;
    text-align: center;
  }
  .prop .propcon span {
    font-size:.8rem;
    color: #666;
  }





  .successprop {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .successprop .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
  }

  .successprop .propcon p {
    width: 60%;
    height:auto;
    text-align: center;
    margin-top:1rem;
    font-size:.34rem;
    line-height:.8rem;
    margin:0 20%;
    color: #ffffff;
    position: relative;
  }
  .successprop .propcon p.successTop {
    margin-top: 2rem;
    border:4px dashed #ffffff;
    height:1rem;
    line-height:1rem;
    border-radius: .3rem;
   }
  .successprop .propcon p.successWord {
    margin-top: .2rem;
  }
  .successprop .propcon p.successBottom {
    margin-top: .2rem;
    border:4px dashed #ffffff;
    height:1rem;
    line-height:1rem;
    border-radius: .3rem;
  }
  .successprop .propcon .upimg {
    position: absolute;
    top:-3.2rem;
    right:-30%;
  }
  .successprop .propcon .downimg {
    position: absolute;
    bottom:-2.8rem;
    right:-20%;
  }
  /*.successprop .propcon a {*/
  /*display: block;*/
  /*width: 3rem;*/
  /*height: 1rem;*/
  /*line-height: 1rem;*/
  /*text-align: center;*/
  /*border:1px solid #000;*/
  /*!*margin-bottom:2rem;*!*/
  /*}*/
  .successprop .propcon div {
    display: block;
    background: #999999;
    color: #ffffff;
    width: 2rem;
    height:1rem;
    font-size:.4rem;
    line-height:1rem;
    text-align: center;
  }




  .zzyprop {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .zzyprop .propcon {
    width: 90%;
    height:12rem;
    margin:0 auto;
    margin-top:2rem;
    /*background: url("../../img/prop5.png") center center no-repeat;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
  }

  .zzyprop .propcon p {
    width: 60%;
    height:auto;
    text-align: center;
    margin-top:1rem;
    font-size:.34rem;
    line-height:.8rem;
    margin:0 20%;
    color: #ffffff;
  }
  .zzyprop .propcon p.zzyTop {
    margin-top: 2rem;
    border:4px dashed #ffffff;
    height:1rem;
    line-height:1rem;
    border-radius: .3rem;
    position: relative;
  }
  .zzyprop .propcon p.zzyWord {
    margin-top: .2rem;
  }
  .zzyprop .propcon p.zzyBottom {
    margin-top: .2rem;
    border:4px dashed #ffffff;
    height:1rem;
    line-height:1rem;
    border-radius: .3rem;
    position: relative;
  }
  .zzyprop .propcon .upimg {
    position: absolute;
    top:-3.2rem;
    right:-20%;
  }
  .zzyprop .propcon .downimg {
    position: absolute;
    bottom:-4rem;
    right:-10%;
  }
  /*.successprop .propcon a {*/
  /*display: block;*/
  /*width: 3rem;*/
  /*height: 1rem;*/
  /*line-height: 1rem;*/
  /*text-align: center;*/
  /*border:1px solid #000;*/
  /*!*margin-bottom:2rem;*!*/
  /*}*/
  .zzyprop .propcon a {
    background: #999999;
    color: #ffffff;
    width: 2rem;
    height:1rem;
    font-size:.4rem;
    line-height:1rem;
    text-align: center;
  }






  .shop {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .shop .shopcon {
    width: 90%;
    height:15rem;
    max-height:15rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/bg2.png") center center no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
  }
  .shop .shopcon h3 {
    width: 100%;
    height: 1.2rem;
    text-align: center;
    line-height:1.2rem;
    font-size:.4rem;
    margin-top:.8rem;
  }
  .shop .shopcon .shopul {
    width: 80%;
    height:auto;
    max-height:9rem;
    padding:0 10%;
    overflow-y: scroll;
  }
  .shop .shopcon .shopli {
    width: 100%;
    height:1rem;
    display: flex;
    justify-content: space-between;
    align-items:center;
    border-bottom:1px solid #dddddd;
  }
  .shop .shopcon .shopli:first-child {
    border-top:1px solid #dddddd;
  }
  .shop .shopcon .shopli div {
    display: flex;
    align-items: center;
    height:1rem;
  }
  .shop .shopcon .shopli div img {
    margin-left:.2rem;
  }
  .shop .shopcon .shopli div p {
    margin-left:.5rem;
    font-size:.34rem;
  }
  .shop .shopcon .shopli img:last-child {
    margin-right:.2rem;
  }
  .shopcon a {
    display: block;
    width: 2rem;
    height: 1rem;
    margin:0 auto;
    text-align: center;
    border:1px solid #000;
    line-height:1rem;
    font-size:.4rem;
    margin-top:1.2rem;
  }
  .shopcon .cha {
    width: 100%;
    position: absolute;
    bottom:0;
    left:0;
    text-align: center;
  }
  .shopcon .cha span {
    width: 1rem;
    font-size:1rem;
    color: #727272;
  }
  .p0 {
    margin-top:4rem !important;
  }
  .span0 {
    position: relative;
    top:-.2rem;
  }
  .marTop5 {
    margin-top:4rem !important;
  }
  .v-spinner {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: #fff;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
</style>
